<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	<!-- 完善js 和 api中的php文件 -->
		<title></title>
		<!-- 引入boostrap、css、jquery文件 -->
		<link rel="stylesheet" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="libs/jquery-3.5.1.min.js"></script><!-- boostrap需要用jquery
															注意引入的先后顺序-->
		<script src="libs/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="./js/utils.js"></script>
	</head>
	<!-- 弹出框可能为模态框 -->
	<body>
		<nav class="navbar navbar-default navbar navbar-inverse">
			<div class="main">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						 aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">乌梢蛇商店</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
							<li><a href="#">其他页面1</a></li>
							<li><a href="#">其他页面2</a></li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li><a href="./html/login.html">登录</a></li>
							<li><a href="./html/register.html">注册</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</div>
		</nav>
		<div class="main_btn">
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" data-whatever="@mdo">
				添加商品
			</button>
		</div>
		<table class="table table table-bordered table-hover table-condensed table-striped tabletable">
		  <thead>
			  <tr>
			    <th>编号</th>
			    <th>商品名称</th>
			    <th>商品价格</th>
			    <th>商品数量</th>
			    <th>操作</th>
			  </tr>
		  </thead>
		  <tbody class="tbody-shop" id="tbody-shop">
		   <!-- <tr>
		      <td>1</td>
		      <td><span>乌梢蛇</span><input type="text"></td>
		      <td><span>100</span><input type="text"></td>
		      <td><span>2</span><input type="text"></td>
		      <td>
		        <button class="btn btn-xs btn-info btn-edit">编辑</button>
		        <button class="btn btn-xs btn-danger btn-del">删除</button>
		        <button class="btn btn-xs btn-success btn-ok">确定</button>
		        <button class="btn btn-xs btn-warning btn-cancel">取消</button>
		      </td>
		    </tr> -->
		  </tbody>
		</table>
		<!-- 响应框 -->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="exampleModalLabel">添加商品</h4>
		      </div>
		      <div class="modal-body">
		        <form>
		          <div class="form-group">
		            <label for="recipient-name" class="control-label nam">商品名称</label>
		            <input type="text" class="form-control ipt" id="inputName" placeholder="请输入商品名称">
		          </div>
		          <div class="form-group">
		            <label for="message-text" class="control-label nam">商品价格</label>
		            <input type="text" class="form-control ipt" id="inputPrice" placeholder="请输入商品价格">
		          </div>
				  <div class="form-group">
				    <label for="message-text" class="control-label nam">商品数量</label>
				    <input type="text" class="form-control ipt" id="inputNum" placeholder="请输入商品数量">
				  </div>
		        </form><!-- 添加成功提示 -->
				<p id="msgWrap" class="text-center"></p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" id="btn-add">添加</button>
		      </div>
		    </div>
		  </div>
		</div>
	</body>
	<script src="js/select.js"></script>
	<script src="js/add.js"></script>
	<script src="js/delete.js"></script>
	<script src="js/edit.js"></script>
	<script src="js/cancel.js"></script>
	<!-- <script src="js/login.js"></script> --><!-- 这个页面没有使用这个js文件，应该在使用了的文件中定义 -->
	<!-- <script src="js/register.js"></script> -->
</html>
